<?php
require_once("config.php");

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST["username"];
    $password = $_POST["pwd"];  // 原始明文密码

    if (empty($_POST["username"]) || empty($_POST["pwd"])) {
        echo "<script>alert('用户名或密码不可为空！'); location.href='register.php';</script>";
        exit();
    }

    $hashedPassword = password_hash($password, PASSWORD_DEFAULT);

    $stmt = $connect->prepare("INSERT INTO librarian(username,password) VALUES(?,?)");
    $stmt->bind_param("ss", $username, $hashedPassword);
    $rs = $stmt->execute();

    if ($rs) {
        echo "<script>alert('用户注册成功！'); window.location='login.php';</script>";
    } else {
        echo "<script>alert('用户注册失败！'); location.href='register.php';</script>";
    }

    $stmt->close();
}
?>
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>图书后台管理系统注册功能</title>
    <link rel="shortcut icon" href="icon/favicon.ico" type="image/x-icon">
    
    <style>
        .copyright {
            position: fixed;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255,255,255,0.6);
            font-size: 14px;
            z-index: 100;
        }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

        body { margin: 0; padding: 0; font-family: 'Microsoft YaHei', sans-serif; background: url('/image/bg.jpg') no-repeat center center fixed; background-size: cover; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; }
        .big_box { width: 960px; height: 500px; margin: auto; background: rgba(255, 255, 255, 0.38); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); overflow: hidden; border-radius: 20px 0 0 20px; backdrop-filter: blur(5px); display: flex; position: relative; }
        .left_box { width: 50%; height: 100%; overflow: hidden; clip-path: ellipse(100% 100% at 0% 50%); }
        .left_box img { width: 100%; height: 100%; object-fit: cover; }
        .right_box { width: 50%; text-align: center; animation: slideInRight 0.8s ease-out; display: flex; flex-direction: column; justify-content: center; padding: 40px; box-sizing: border-box; }
        table { margin: auto; animation: fadeIn 1s ease-out; width: 100%; max-width: 320px; }
        h2 { margin-top: 0; color: #333; animation: fadeIn 0.8s ease-out; margin-bottom: 30px; }
        .iput { width: 100%; height: 40px; border: 1px solid #ddd; border-radius: 6px; padding: 0 15px; font-size: 14px; background-color: rgba(255, 255, 255, 0.9); }
        .iput:focus { border-color: #4a90e2; box-shadow: 0 0 8px rgba(74, 144, 226, 0.2); outline: none; }
        .iput1, .iput2 { width: 120px; height: 45px; font-size: 15px; margin: 0 10px; cursor: pointer; transition: all 0.3s; display: inline-flex; align-items: center; justify-content: center; }
        .iput1 { background-color: #4a90e2; color: white; border: none; border-radius: 6px; }
        .iput1:hover { background-color: #3a7bc8; }
        .iput2 { background-color: #f5f5f5; color: #333; border: 1px solid #ddd; border-radius: 6px; }
        .iput2:hover { background-color: #e0e0e0; }
        .big_box.shake { animation: shake 0.3s ease-in-out forwards; }
        tr { height: 60px; }

        
        .core-value {
            position: absolute;
            pointer-events: none;
            font-size: 18px;
            font-family: '微软雅黑';
            color: #FF0000;
            user-select: none;
            z-index: 999;
            transform: scale(0.1);
            transition: transform 0.3s ease-out;
        }

        .core-value.active {
            transform: scale(1);
        }
    </style>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body oncontextmenu="return false;" ondragstart="return false;">
    <div class="big_box">
        <div class="left_box"><img src="image/paperwall_14.jpg" draggable="false"></div>
        <div class="right_box">
            <h2>管理员注册</h2>
            <form method="post" action="" onsubmit="return check()">
                <table>
                    <tr>
                        <td>
                            <input type="text" name="username" class="iput" placeholder="请输入用户名">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="password" name="pwd" class="iput" placeholder="请输入密码">
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <input type="submit" name="register" value="注册" class="iput1">
                            <button type="button" onclick="location.href='login.php'" class="iput2">
                                <i class="fa fa-arrow-left mr-2"></i>返回
                            </button>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>

    <div class="copyright">
        @2025-05.22 由唯出品/gitee/github/4230603094
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {

            document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
            });

            document.addEventListener('selectstart', function(e) {
                e.preventDefault();
            });

            document.querySelectorAll('img').forEach(img => {
                img.draggable = false;
            });

            const inputs = document.querySelectorAll('.iput');
            inputs.forEach(input => {
                input.addEventListener('focus', function () {
                    this.style.boxShadow = '0 0 8px rgba(74, 144, 226, 0.3)';
                });
                input.addEventListener('blur', function () {
                    this.style.boxShadow = '';
                });
            });
        });

        function check() {
            const username = document.querySelector('input[name="username"]').value;
            const password = document.querySelector('input[name="pwd"]').value;

            if (!username || !password) {
                alert('用户名和密码不可为空！');
                return false;
            }

            return true;
        }
        const coreValues = [
            '富强', '民主', '文明', '和谐',
            '自由', '平等', '公正', '法治',
            '爱国', '敬业', '诚信', '友善'
        ].flatMap(word => [word, word]);

        document.addEventListener('click', (e) => {
            if (e.button !== 0) return;

            const x = e.clientX;
            const y = e.clientY;
            const randomIndex = Math.floor(Math.random() * coreValues.length);
            const valueText = coreValues[randomIndex];

            const span = document.createElement('span');
            span.className = 'core-value';
            span.textContent = valueText;
            span.style.left = `${x}px`;
            span.style.top = `${y}px`;

            span.classList.add('active');
            document.body.appendChild(span);

            setTimeout(() => {
                span.remove();
            }, 1000);
        });
    </script>
</body>
</html>